<template>
  <div class="box">
    <div id="login_box">
      <h2>用户登录</h2>
      <div id="form">
        <div id="input_box1">
          <i class="fa fa-user" aria-hidden="true"></i>
          <!--用户名：<input class="in" type="text" placeholder="请填写用户名" />-->
          <el-input
            placeholder="请输入用户名"
            v-model="input_name"
            show-word-limit
            maxlength="6"
            minlength="3"
            :suffix-icon="name_law"
            clearable>
          </el-input>
        </div>
        <div id="input_box2">
          <i class="fa fa-key" aria-hidden="true"></i>
          <!--密码：<input class="in" type="passwoprd" placeholder="请填写密码" />-->
          <el-input
            placeholder="请输入密码"
            v-model="input_password"
            clearable
            show-password>
          </el-input>
        </div>
      </div>

      <!--<button>登陆</button>-->
      <el-button  :plain="true" @click="login(input_id,input_password)">登陆</el-button>
      <div id="Sign">
        <a href="a">忘记密码?</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      input_id: '',
      input_password: '',
      name_law: '',
      info: ''
    }
  },
  methods: {
    open_success (msg) {
      this.$message({
        message: msg,
        type: 'success'
      })
    },
    open_fail (msg) {
      this.$message.error(msg)
    },
    check_userInfo: function (name, password) {
      if (this.check_param(name) && this.check_param(password)) {
        return true
      } else {
        return false
      }
    },
    check_param: function (param) {
      if (param.length > 12) {
        this.open_fail('用户名或密码长度不能大于12')
        return false
      } else if (param.length < 0) {
        this.open_fail('用户名或密码长度不能小于4')
        return false
      } else {
        return true
      }
    },
    login: function (name, password) {
      if (!this.check_userInfo(name, password)) {
        return false
      }
      var re = this
      this.axios.get('http://localhost:8080/linearAlgebra/user/login?id=' + name + '&password=' + password)
        .then(function (response) {
          if (response.data.result != null) {
            re.open_success('登陆成功')
            if (response.data.result === 1) {
              sessionStorage.setItem('id', name)
              re.$router.push('/admin')
            } else {
              re.$router.push('/')
            }
          } else {
            re.open_fail('用户名或密码错误')
          }
        })
    }
  }

}

</script>

<style scoped>
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../../../static/img/background8.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
}

#login_box {
  width: 300px;
  /*background:#3a8ee663;*/
  background: #95c2f1;
  float: right;
  margin-top: 200px;
  margin-right: 15%;
  text-align: center;
  border-radius: 10px;
  padding: 20px 50px;
}

.in {
  height: 23px;
}

#login_box h2 {
  color: #fff;
  margin-top: 0;
}

#login_box #form #input_box1, #input_box2 {
  margin-top: 30px;
  height: 40px;
}

#login_box #form #input_box i {
  color: #fff;
}

#login_box #form #input_box input {
  border: 0;
  width: 60%;
  font-size: 15px;
  color: #fff;
  background: #ffffff00;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  margin-top: 10px;
}

#login_box button {
  margin-top: 50px;
  width: 40%;
  height: 30px;
  border-radius: 10px;
  border: 0;
  color: #fff;
  font-size: 15px;
  background-image: linear-gradient(to top, #30324d 0%, #5f6298 100%);
}

#login_box #Sign {
  margin-top: 15px;
  margin-right: 0px;
}

#login_box #Sign a {
  color: #fff;
}
</style>
